<script setup lang="ts">
import Section from '@/components/Section/index.vue'

import { defineProps } from 'vue'
defineProps({
  support: {
    type: Object
  }
})
</script>

<template>
  <Section
    icon-name="material"
    :zh="support.big_title"
    :en="support.small_title"
    :showBorder="true"
  >
    <u-grid :border="false" @click="click">
      <u-grid-item v-for="item in support.content" :key="item.id">
        <view class="check">
          <u-icon name="checkmark-circle-fill" v-if="item.check"></u-icon>
          <u-icon name="close-circle-fill" v-else></u-icon>
          <text class="grid-text">{{ item.name }}</text>
        </view>
      </u-grid-item>
    </u-grid>
  </Section>
</template>

<style scoped lang="scss">
.content {
  width: 100%;
}
.grid-text {
  display: inline-block;
  font-size: 26rpx;
  padding-left: 6rpx;
}
.check {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  height: 70rpx;
  align-items: center;
}
</style>
